<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        span {
            text-decoration: underline;
        }

        .inp {
            width: 60px;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>

</head>
<body>

<table id="tab" border="1" width="330" align="center">
    <tr>
        <td colspan="5">姓名：<input type="text" class="inp"/>&nbsp;
            年龄：<input type="number" class="inp"/>&nbsp;<button>添加</button>
        </td>
    </tr>
    <tr>
        <th>选择</th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th><span>删除多行</span></th>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td><span>删除</span></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td><span>删除</span></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>王三</td>
        <td>19</td>
        <td><span>删除</span></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>王五</td>
        <td>21</td>
        <td><span>删除</span></td>
    </tr>
</table>

<script>

    $(function () {

        console.log("111")

        /*
        * 1)	点击添加按钮，若姓名或年龄未输入，则友好提示，
        * 否则在把输入信息添加到表格最后一行，且编号需依次累加。
          2)	点行中的删除标签，实现删除当前行功能
          3)	点击删除多行标签，若没有复选框选中，则友好提示，否则删除选中的行

        * */

        //点击添加按钮，若姓名或年龄未输入，则友好提示，
        var arr = Array();

        $("button").click(
            function () {
                console.log("我被点击了")
                $("input:not('input[type=checkbox]')").each(function (i, v) {
                    if ($(v).val() === "") {
                        alert("请输入content")
                        return;
                    }

                    //有是数据执行的代码 为变量赋值操作
                    console.log($(v).val())
                    //赋值
                    arr[i]=$(v).val()


                })

                //有数据执行代码
                //否则在把输入信息添加到表格最后一行，且编号需依次累加。
                // 获取最后一行数

                //点击添加按钮，则在表格最后添加一行数据，
                // 且分类ID在已有的最后一行的基础上+1，
                // 比如在上图表中新增一行，则分类ID为5
                    // 获取最后一行数

                    var leng = $("tr").length
                    var row = $("<tr>" +
                        "<td><input type='checkbox'><td>" +
                        "<td>"+arr[0]+"</td>" +
                        "<td>"+arr[1]+"</td>" +
                        "<td><span>删除</span></td>" +
                        "</tr>")


                    var table = $("table")
                    row.appendTo(table)

                    console.log($("tr:last tr:first-child"))
                    $("tr:last td:nth-child(2)").html(leng-1)

            })
        console.log(arr)

       // 2)	点行中的删除标签，实现删除当前行功能
            // 则实现删除当前行功能(index()方法或者parent())，
            $("table").on("click","span:not(tr:eq[1] td:nth-child(5))",function () {
                $(this).parent().parent().remove();//删除tr
                return false
            })


        //  3)	点击删除多行标签，若没有复选框选中，则友好提示，否则删除选中的行
        $("tr:eq(1) td:nth-child(5)").click(function () {

            console.log("111")
        })









    })

</script>
</body>
</html>